<template>
	<view class="tabBar">
		<view v-for="(item,index) in tabBar" :key="index" class="tabbar_item" :class="{'active':activeIndex == index}"
		 @click="_onClick(index)">
			<image v-if="activeIndex == index" :src="item.iconSelectPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			tabBar: {
				type: Array,
				default: function() {
					return []
				}
			},
			activeIndex: {
				type: [Number, String],
				default: 0
			}
		},
		methods:{
			_onClick(index) {
				this.$emit('click',index)
			}
		}
	}
</script>

<style lang='less' scoped>

.tabBar{
	width: 100%;
	height: 100upx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin:0 auto;
	z-index: 998;
	background: #fff;
	display: flex;
	box-shadow: 0 -1px 5px #333333;
	.tabbar_item{
		font-size: 12px;
		color: #ccc;;
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&.active{
			color: red;
		}
	}
	image{
		width: 36upx;
		height:36upx;
		/* margin-left: 5upx; */
	}
}
</style>
